<template>
  <eip-modal
    :visible="visible"
    title="交互规则"
    @close="cancel"
    :width="1100"
    :height="700"
  >
    <template slot="body">
      <a-form-model ref="form" :model="form" :rules="rules">
        <a-form-model-item label="规则名称" prop="name">
          <a-input
            v-model="form.name"
            placeholder="请输入规则名称"
            allow-clear
          />
        </a-form-model-item>
        <a-form-model-item label="当满足以下条件时">
          <search :filters="form.filters" :columns="columns"></search>
        </a-form-model-item>
        <a-form-model-item label="则执行动作">
          <div
            class="flex justify-left align-center"
            v-for="item in form.actions"
            :key="item.id"
          >
            <div class="margin-right">
              <a-select v-model="item.type" style="width: 130px">
                <a-select-option
                  :value="eipZeroCodeFormSettingRuleActionType.show"
                  >显示</a-select-option
                >
                <a-select-option
                  :value="eipZeroCodeFormSettingRuleActionType.hide"
                  >隐藏</a-select-option
                >
                <a-select-option
                  :value="eipZeroCodeFormSettingRuleActionType.write"
                  >可编辑</a-select-option
                >
                <a-select-option
                  :value="eipZeroCodeFormSettingRuleActionType.readonly"
                  >只读</a-select-option
                >
                <a-select-option
                  :value="eipZeroCodeFormSettingRuleActionType.required"
                  >必填</a-select-option
                >
                <a-select-option
                  :value="eipZeroCodeFormSettingRuleActionType.readonlyAll"
                  >只读所有字段</a-select-option
                >
              </a-select>
            </div>
            <div class="flex-sub">
              <div class="flex justify-start align-center">
                <a-select
                  v-if="
                    item.type !=
                    eipZeroCodeFormSettingRuleActionType.readonlyAll
                  "
                  v-model="item.key"
                  placeholder="请选择操作字段"
                  mode="multiple"
                  :allowClear="true"
                  optionFilterProp="label"
                  show-search
                >
                  <div slot="dropdownRender" slot-scope="menu">
                    <v-nodes :vnodes="menu" />
                    <a-divider style="margin: 4px 0" />
                    <div style="padding: 4px 8px">
                      <a-space>
                        <a-button @click="all(item)" type="primary" size="small"
                          >全选</a-button
                        >

                        <a-button
                          @click="item.key = []"
                          type="primary"
                          size="small"
                          >清空</a-button
                        >
                      </a-space>
                    </div>
                  </div>

                  <a-select-option
                    :key="column.key"
                    :value="column.key"
                    v-for="column in columns"
                    :label="column.label"
                    >{{ column.label }}</a-select-option
                  >
                </a-select>
                <a-popconfirm
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="del(item.id)"
                >
                  <template slot="title"> 确定删除选中 </template>
                  <a-button
                    type="danger"
                    icon="delete"
                    class="margin-left"
                  ></a-button>
                </a-popconfirm>
              </div>
            </div>
          </div>
          <a-button type="primary" icon="plus" style="width: 130px" @click="add"
            >添加动作</a-button
          >
        </a-form-model-item>
      </a-form-model>
    </template>
    <template slot="footer">
      <div class="flex justify-between align-center">
        <div></div>
        <a-space>
          <a-button @click="cancel"><a-icon type="close" />关闭</a-button>
          <a-button @click="ok" key="submit" type="primary"
            ><a-icon type="save" />提交</a-button
          >
        </a-space>
      </div>
    </template>
  </eip-modal>
</template>

<script>
import { findById } from "@/services/system/zerocode/run/edit";
import search from "@/pages/system/zerocode/worksheet/components/packages/components/Filters/index";
import { newGuid } from "@/utils/util";
export default {
  name: "edit",
  components: {
    search,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes,
    },
  },
  data() {
    return {
      columns: [],

      form: {
        id: newGuid(),
        isFreeze: false,
        name: "",
        filters: {
          groupOp: "AND",
          rules: [],
          groups: [],
        },
        filtersDesc: "",
        actions: [],
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
      },
    };
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    options: Object,
    title: {
      type: String,
    },
    mode: String,
    zeroCodeId: String,
  },
  mounted() {
    if (this.mode == "edit") {
      this.form = Object.assign(this.form, this.options);
    }
    this.initColumns();
  },
  methods: {
    all(item) {
      item.key = this.columns.map((m) => m.key);
    },

    /**
     * 删除
     * @param id
     */
    del(id) {
      this.$utils.remove(this.form.actions, (f) => f.id == id);
    },
    /**
     * 增加
     */
    add() {
      this.form.actions.push({
        id: newGuid(),
        type: 1,
        key: [],
      });
    },

    /**
     *
     */
    async initColumns() {
      let that = this;
      that.columns = [];
      var systemZeroCodeData = await findById(that.zeroCodeId);
      if (systemZeroCodeData.data.columnJson) {
        that.columns = JSON.parse(systemZeroCodeData.data.columnJson);
      }
    },

    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },
    /**
     * 确定
     */
    ok() {
      let that = this;
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (
            that.form.filters.rules.length == 0 &&
            that.form.filters.groups.length == 0
          ) {
            that.$message.error("请添加条件");
            return;
          }
          if (that.form.actions.length == 0) {
            that.$message.error("请执行动作");
            return;
          }

          that.$emit("ok", that.form);
          that.cancel();
        }
      });
    },

    /**
     *复制
     */
    copyClick(form) {
      var copy = this.$utils.clone(form, true);
      copy.id = newGuid();
      this.options.push(copy);
    },
    /**
     * 表单字段
     * @param form
     */
    formOk(form) {
      this.form.form = form;
      this.initCorrection();
    },

    /**
     * 提交
     * @param form
     */
    submitOk(form) {
      this.form.submit = form;
      this.initCorrection();
    },
  },
};
</script>
<style scoped></style>
